<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="public/vue.js"></script>
</head>
<body>
<div id="app">
    姓： <input type="text" name="fname" v-model="fname"><br>
    名： <input type="text" name="lname" v-model="lname"><br>
    姓名1： <input type="text" name="name1" v-model="name1"><br>
    姓名2： <input type="text" name="name2" v-model="name2"><br>
    姓名3： <input type="text" name="name3" v-model="name3"><br>
    {{name1}}
    {{name1}}
    {{name1}}
    {{name1}}
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            fname: '',
            lname: '',
            name2: '',
        },
        computed: {
            name1() {
                console.log("show");
                return this.fname + ' ' + this.lname;
            },
            name3: {
                get() {
                    return this.fname + ' ' + this.lname;
                },

                set(value) {
                    var arr = value.split(' ');
                    this.fname = arr[0];
                    this.lname = arr[1];
                }
            }
        },
        watch: {
            fname: function (value) {
                this.name2 = value + '    '+this.lname;
            }
        }
    });

</script>
</body>
</html>